<template>
  <base-breadcrumb :title="$route.meta.title">
    <!-- 质量创优预算 -->
    <div
      id="base-breadcrumb"
      style="position: relative; overflow: hidden"
    >
      <!-- 搜索 -->
      <searchData
        :searchData="searchArr"
        @search="search"
      ></searchData>
      <!-- 表格 -->
      <a-card :bordered="false">
        <!-- <title-name :title="$route.meta.title"></title-name> -->
        <!-- 表格 -->
        <list-table
          ref="table"
          tableLayout="fixed"
          size="default"
          :columns="columns"
          :request="loadData"
          :isShowCountBar="false"
          :startIndex="0"
          :selectConfig="{ use: true, type: 'checkbox', rowKey: 'id' }"
          :exportPermission="{ select: 'qm_048_aexp_08', all: 'qm_048_sexp_07' }"
          :exportConfig="{ use: true,
          customColumns:[
            {
              title: '序号',
              dataIndex: 'index'
            },
            ...columns
          ],
          select: '质量创优预算', all: '质量创优预算' }"
        >
          <a-button
            slot="prefix"
            v-btnPermission="'qm_048_add_01'"
            icon="plus"
            type="primary"
            @click="handleManage(2)"
          >新增质量创优预算</a-button>
          <template
            slot="actions"
            slot-scope="text, record"
          >
            <MoreButton>
            <!-- 查看 -->
            <a
              v-btnPermission="'qm_048_loo_04'"
              @click="handleManage(0, record)"
            >查看</a>
            <!-- 编辑 -->
            <template v-if="record.isOperation && (record.statusCode === '0' || record.statusCode === '3')">
              <a-divider
                v-btnPermission="'qm_048_edi_02'"
                type="vertical"
              ></a-divider>
              <a
                v-btnPermission="'qm_048_edi_02'"
                @click="handleManage(1, record)"
              >编辑</a>
            </template>
            <!-- 删除 -->
            <template v-if="record.isOperation && record.statusCode === '0'">
              <a-divider
                v-btnPermission="'qm_048_del_03'"
                type="vertical"
              ></a-divider>
              <a
                v-btnPermission="'qm_048_del_03'"
                @click="handleRemove(record.id)"
              >删除</a>
            </template>
            <!-- 调整 -->
            <template v-if="record.statusCode === '2'">
              <a-divider
                v-btnPermission="'qm_048_rej_06'"
                type="vertical"
              ></a-divider>
              <a
                v-btnPermission="'qm_048_rej_06'"
                @click="handleManage(3, record)"
              >调整</a>
            </template>
            <!-- 当状态为审批中 -->
            <template v-if="record.statusCode != '0'">
              <a-divider
                v-btnPermission="'qm_048_exa_05'"
                type="vertical"
              ></a-divider>
              <a
                v-btnPermission="'qm_048_exa_05'"
                @click="$bus.$emit('showApprovalDetailsDialog', record.id)"
              >审批详情</a>
            </template>
            </MoreButton>
          </template>
          <!-- 版本 -->
          <template
            slot="versionName"
            slot-scope="text, record"
          >
            <a
              v-if="text"
              @click="handleOpen(record)"
            >{{ text }}</a>
          </template>
          <!-- 状态 -->
          <!-- <template slot="statusName" slot-scope="text, record">
            <status-display :statusCode="record.statusCode" isApproval></status-display>
          </template> -->
        </list-table>
      </a-card>
    </div>
    <dialog-edit
      :columns="[
        {
          title: '版本号',
          dataIndex: 'version',
          customRender(e) {
            return e ? 'V' + e : ''
          }
        },
        {
          title: '上传时间',
          dataIndex: 'fillerDate'
        },
        {
          title: '操作',
          dataIndex: 'actions',
          width: '100px',
          scopedSlots: { customRender: 'actions' }
        }
      ]"
      :visible.sync="visible"
      :api="api"
      :args="form"
      pathName="excellenceBudgetEdit"
    ></dialog-edit>
  </base-breadcrumb>
</template>

<script>
import { excellenceBudget } from '@/api/quality/quality' // api
import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
import SelectProject from '@/components/Select/SelectProject' // 项目名称
import OrgTreeSelect from '@/components/OrgTreeSelect'
import Selector from '@/components/Select/Selector' // 枚举值
import BasePage from '@/views/basePage'
import StatusDisplay from '@/components/StatusDisplay'
import dialogEdit from '@/views/quality/components/VisionHistory' // 版本详情
import SelectProjectStatus from '@/views/quality/components/SelectProjectStatus' // 项目状态

const searchArr = [
  // 搜索框
  {
    name: '所属单位',
    valueKey: 'searchQuery',
    type: OrgTreeSelect,
  },
  // {
  //   name: '所属分公司',
  //   type: SelectSubCompany,
  //   valueKey: 'branchCompanyId'
  // },
  // {
  //   name: '所属项目',
  //   type: SelectProject,
  //   valueKey: 'projectId'
  // },
  {
    name: '项目状态',
    type: SelectProjectStatus,
    valueKey: 'projectStatus'
  },
  {
    name: '创建时间',
    type: 'dateRange',
    value: 'time',
    attr: {
      rangeFormat: ['startDate', 'endDate']
    }
  },
  {
    name: '状态',
    valueKey: 'statusCode',
    type: Selector,
    valueName: 'code',
    selectType: '22'
  }
]
const columns = [
  {
    title: '分公司',
    ellipsis: true,
    dataIndex: 'branchComName'
  },
  {
    title: '项目',
    ellipsis: true,
    dataIndex: 'projectName'
  },
  {
    title: '预算金额（万元）',
    dataIndex: 'budgetMoney'
  },
  {
    title: '结算金额（万元）',
    dataIndex: 'settlementMoney'
  },
  {
    title: '创优目标',
    ellipsis: true,
    dataIndex: 'targetName'
  },
  {
    title: '文件名称',
    ellipsis: true,
    dataIndex: 'name'
  },
  {
    // ellipsis: true,
    title: '创建时间',
    dataIndex: 'fillerDate'
  },
  {
    title: '版本信息',
    dataIndex: 'versionName',
    scopedSlots: { customRender: 'versionName' }
  },
  {
    title: '状态',
    dataIndex: 'statusName'
    // scopedSlots: { customRender: 'statusName' }
  },
  {
    title: '操作',
    dataIndex: 'actions',
    width: '180px',
    align: 'center',
    scopedSlots: { customRender: 'actions' }
  }
]
export default {
  name: 'a' + Date.now(),
  extends: new BasePage(),
  components: {
    StatusDisplay,
    dialogEdit
  },
  data() {
    this.columns = columns
    this.searchArr = searchArr
    return {
      queryParam: {}, // 查询参数
      visible: false, // 弹窗显隐控件
      removeApi: excellenceBudget,
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        return excellenceBudget.postList(requestParameters).then((res) => {
          res.data?.forEach((i) => {
            if (i.version) {
              i.versionName = 'V' + i.version
            }
          })
          return res
        })
      },
      editModel: 0,
      api: excellenceBudget, // 汇总api
      form: {},
      exportLoading: {
        0: false,
        1: false
      } // 导出loading
    }
  },
  methods: {
    /**
     * 查看历史版本
     */
    handleOpen(e) {
      this.form.id = e.id
      this.visible = true
    },
    /**
     * @description: 导出word
     * @param {*} index：导出类型：0 选中，1 全部
     * @param {*} datas：选中项
     */
    exportWord(index, datas) {
      let args = {}
      if (datas?.length) {
        args.ids = datas
      } else {
        args = this.queryParam
      }
      this.exportLoading[index] = true
      excellenceBudget
        .batchPrint(args)
        .then((res) => {
          this.exportLoading[index] = false
          if (res.code === 200) {
            // 格式化名称，防止重名被覆盖
            res.data.forEach((i, idx) => {
              i.name = Number(idx) + 1 + '.' + i.name
            })
            this.exportPointInfo(res.data, '样板旁站记录')
          }
        })
        .catch(() => {
          this.exportLoading[index] = false
        })
    },
    // 搜索
    search(value) {
      value && (this.queryParam = value)
      this.$refs.table.refresh(true)
    },
    // 操作栏
    handleManage(type, record) {
      this.editModel = type
      let query = {
        editModel: type
      }
      if (record && record.id) {
        query.id = record.id
      }
      this.$router.push({
        name: 'excellenceBudgetEdit',
        query
      })
    }
  }
}
</script>
